<template>
  <div class="page-header">
    <Breadcrumb class="breadcrumb" v-if="breadcrumbList">
      <BreadcrumbItem v-for="(item, index) in breadcrumbList" :key="index" :href="item.href">{{ item.title}}</BreadcrumbItem>
    </Breadcrumb>
    <div class="detail">
      <div class="logo" v-if="logo"><img :src="logo" alt="logo"></div>
      <div class="main">
        <div class="row">
          <h1 class="title" v-if="title">{{ title }} </h1>
          <div class="action" v-if="showAction">
            <slot name="action"></slot>
          </div>
        </div>
        <div class="row" v-if="showContent">
          <div class="content">
            <slot name="content">
              {{ content }}
            </slot>
          </div>
          <div class="extra-content" v-if="showExtra">
            <slot name="extraContent">
            </slot>
          </div>
        </div>
      </div>
    </div>
    <Menu class="tabs" mode="horizontal" :active-name="tabList[0].key" v-if="tabList" @on-select="handleSelect">
      <MenuItem :name="item.key" v-for="(item, index) in tabList" :key="index"> {{ item.title }}
      </MenuItem>
    </Menu>
  </div>
</template>
<script>
export default {
  name: 'PageHeader',
  props: {
    breadcrumbList: {
      type: Array
    },
    tabList: {
      type: Array
    },
    title: {
      type: String
    },
    content: {
      type: String
    },
    logo: {
      type: String
    },
    action: {},
    extraContent: {}
  },
  data() {
    return {
      showExtra: false,
      showAction: false,
      showContent: false,
      showTitle: false
    }
  },
  methods: {
    handleSelect(key) {
      this.$emit('onTabChange', key)
    }
  },
  mounted() {
    this.showExtra = this.$slots.extraContent !== undefined
    this.showAction = this.$slots.action !== undefined
    this.showContent = this.$slots.content !== undefined || this.content
  }
}
</script>
<style scoped>
.page-header {
  background: #fff;
  padding: 16px 32px 0 32px;
  border-bottom: 1px solid #e8e8e8;
}

.page-header .action,
.page-header .content,
.page-header .extra-content,
.page-header .main,
.page-header .title {
  flex: auto;
}

.page-header .action,
.page-header .extra-content,
.page-header .content,
.page-header .title {
  margin-bottom: 16px;
}

.page-header .detail,
.page-header .row {
  display: flex;
}

.page-header .breadcrumb {
  margin-bottom: 16px;
}

.page-header .logo {
  flex: 0 1 auto;
  margin-right: 16px;
  padding-top: 1px;
}

.page-header .logo > img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: block;
}

.page-header .detail {
  display: flex;
}

.page-header .title {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.page-header .content {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.65);
}

.page-header .action,
.page-header .extra-content {
  text-align: right;
}

.page-header .extra-content {
  margin-left: 88px;
  min-width: 242px;
}

.page-header .tabs {
  height: 45px;
  line-height: 45px;
}

@media screen and (max-width: 1200px) {
  .page-header .extra-content {
    margin-left: 44px;
  }
}

@media screen and (max-width: 992px) {
  .page-header .extra-content {
    margin-left: 20px;
  }
}

@media screen and (max-width: 768px) {
  .page-header .row {
    display: block;
  }
  .page-header .action,
  .page-header .extra-content {
    margin-left: 0;
    text-align: left;
  }
}

@media screen and (max-width: 576px) {
  .page-header .detail {
    display: block;
  }
}
</style>
<style>
.page-header .ivu-menu-horizontal.ivu-menu-light:after {
  background: none;
}

@media screen and (max-width: 480px) {
  .page-header .action .ivu-btn-group,
  .page-header .action .ivu-btn {
    display: block;
    margin-bottom: 8px;
  }
  .page-header .action .ivu-btn-group > .ivu-btn {
    display: inline-block;
    margin-bottom: 0;
  }
}
</style>
